<template>
	<view class="u-p-30">
		<view class="message-list-item" v-for="(item, i) in list" :key="i" @click="toUserInfo(item.userId)">
			<view class="message-icon">
				<u-avatar :text="item.name.substr(-1)" mode="circle" bg-color="#0071C5" color="#FFFFFF"></u-avatar>
			</view>
			<view class="message-content">
				<view class="message-type-title">
					<view class="u-flex-1">
						{{item.name}}
					</view>
				</view>
				<view class="message-item u-line-1">
					{{item.orgName}}/{{item.positionName}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: []
			}
		},
		methods: {
			toUserInfo(pUserId) {
				this.$u.route('pages/contacts/user-info', {id: pUserId})
			}
		},
		onLoad() {
			this.$u.api.findFavoriteContact().then(res => {
				this.list = res
			}).catch(err => {
				console.log(err)
			})
		}
	}
</script>

<style>
	page {
		background-color: #FFFFFF;
	}
</style>
<style lang="scss" scoped>
	.message-list-item {
		display: flex;
		margin-bottom: 20rpx;
		.message-icon {
			position: relative;
			width: 88rpx;
			height: 88rpx;
		}
		.message-content {
			flex: 1;
			width: 0;
			padding-left: 20rpx;
			border-bottom: 1px solid #F7F8FA;
			.message-type-title {
				display: flex;
				font-size: 32rpx;
				font-weight: bold;
				.message-time {
					width: 100rpx;
					text-align: center;
					font-size: 24rpx;
					color: #CCCCCC;
				}
			}
			.message-item {
				width: 100%;
				padding-bottom: 20rpx;
				font-size: 24rpx;
				color: #999999;
			}
		}
	}
</style>
